﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="pufflesweb.index" %>

<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
  <head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900%7CLato%7CKalam:300,400,700">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/style.css">
    <style>.ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}</style>
  </head>
  <body>
    <div class="ie-panel"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img src="images/ie8-panel/warning_bar_0000_us.jpg" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
    <div class="preloader">
      <div class="preloader-body">
        <div class="cssload-bell">
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="page">
      <!-- Page Header-->
      <header class="section page-header">
        <!-- RD Navbar-->
        <div class="rd-navbar-wrap">
          <nav class="rd-navbar rd-navbar-modern" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-lg-stick-up-offset="100px" data-xl-stick-up-offset="120px" data-xxl-stick-up-offset="140px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
            <div class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div>
            <div class="rd-navbar-aside-outer">
              <div class="rd-navbar-aside">
                <div class="rd-navbar-collapse">
                  <div class="contacts-ruth">
                    <div class="unit unit-spacing-xs align-items-center">
                      <div class="unit-left"><span class="linear-icon icon linearicons-map-marker"></span></div>
                      <div class="unit-body"><a href="#">
                          <asp:Label ID="username" runat="server" Text="Label"></asp:Label><br/>泡芙欢迎您</a></div>
                    </div>
                  </div><a class="button button-primary-outline button-sm button-icon button-icon-left" href="login.aspx"><span class="icon mdi mdi-email-outline icon-size-m"></span>登录与注册</a>
                </div>
                <!-- RD Navbar Panel-->
                <div class="rd-navbar-panel">
                  <!-- RD Navbar Toggle-->
                  <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
                  <!-- RD Navbar Brand-->
                  <div class="rd-navbar-brand"><a class="brand" href="index.aspx"><img class="brand-logo-dark" src="images/logo-default-336x120.png" alt="" width="168" height="60"/></a>
                  </div>
                </div>
                <div class="rd-navbar-button"><a class="button button-primary-outline button-sm button-icon button-icon-left" href="login.aspx"><span class="icon mdi mdi-email-outline icon-size-m"></span>登录与注册</a></div>
              </div>
            </div>
            <div class="rd-navbar-main-outer">
              <div class="rd-navbar-main">
                <div class="rd-navbar-nav-wrap">
                  <!-- RD Navbar Nav-->
                  <ul class="rd-navbar-nav">
                    <li class="rd-nav-item active"><a class="rd-nav-link" href="index.aspx">首页</a>
                    </li>
                    <li class="rd-nav-item"><a class="rd-nav-link" href="#">网站介绍</a>
                      <!-- RD Navbar Dropdown-->
                      <ul class="rd-menu rd-navbar-dropdown">
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="about-us.aspx">关于我们</a></li>
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="what-we-offer.aspx">我们提供什么</a></li>
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="testimonials.aspx">推荐</a></li>
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="pricing-list.aspx">定价表</a></li>
                      </ul>
                    </li>
                    <li class="rd-nav-item"><a class="rd-nav-link" href="apply-list.aspx">救助与领养</a>
                      <!-- RD Navbar Dropdown-->
                      <ul class="rd-menu rd-navbar-dropdown">
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="apply-list.aspx">救助列表</a></li>
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="help.aspx">救助申请</a></li>
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="adpot.aspx">领养申请</a></li>
                      </ul>
                    </li>
                    <li class="rd-nav-item"><a class="rd-nav-link" href="gallery.aspx">画廊</a>
                    </li>
                    <li class="rd-nav-item"><a class="rd-nav-link" href="#">个人中心</a>
                      <!-- RD Navbar Megamenu-->
                      <ul class="rd-menu rd-navbar-dropdown">
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="personal-center.aspx">个人中心</a></li>
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="Collect.aspx">个人收藏</a></li>
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="adoptlook.aspx">领养申请查看</a></li>
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="helplook.aspx">救助申请查看</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="rd-navbar-main-element">
                  <!-- RD Navbar Search-->
                  <div class="rd-navbar-search rd-navbar-search-2">
                    <button class="rd-navbar-search-toggle rd-navbar-fixed-element-3" data-rd-navbar-toggle=".rd-navbar-search"><span></span></button>
                    <form class="rd-search" action="search-results.aspx" data-search-live="rd-search-results-live" method="GET">
                      <div class="form-wrap">
                        <label class="form-label" for="rd-navbar-search-form-input">Search...</label>
                        <input class="rd-navbar-search-form-input form-input" id="rd-navbar-search-form-input" type="text" name="s" autocomplete="off"/>
                        <div class="rd-search-results-live" id="rd-search-results-live"></div>
                        <button class="rd-search-form-submit fl-bigmug-line-search74" type="submit"></button>
                      </div>
                    </form>
                  </div>
                  <!-- RD Navbar Basket-->
                  
                </div>
              </div>
            </div>
          </nav>
        </div>
      </header>
      <!-- Main screen-->
      <section class="section section-xxl bg-primary context-dark bg-position-1 bg-ovrlay" style="background-image: url('images/home-bg-1.jpg')">
        <div class="container">
          <div class="row justify-content-start">
            <div class="col-xl-7 col-md-8 text-left">
              <h1 class="lt-spacing-normal" data-caption-animate="fadeInLeft" data-caption-delay="100">Puffles泡芙</h1>
              <h3 class="lt-spacing-75 offset-top-10 text-transform-uppercase heading-devider">一个专注于宠物救助的网站</h3>
              <h4 class="lt-spacing-100 offset-top-25 font-weight-regular" data-caption-animate="fadeInLeft" data-caption-delay="400">让您的宠物舒心，让您宽心，就是puffles泡芙</h4>
              <div class="button-wrap" data-caption-animate="fadeInLeft" data-caption-delay="550"><a class="button button-lg button-primary" href="shop-list.aspx">更多资讯</a></div>
            </div>
          </div>
        </div>
      </section>
      <!-- About Us-->
      <section class="section section-xl section-last bg-default">
        <div class="container">
          <h2 class="wow fadeScale">puffles泡芙</h2>
          <!-- Owl Carousel-->
          <div class="owl-carousel owl-style-8" data-loop="false" data-items="1" data-sm-items="2" data-lg-items="3" data-margin="30" data-dots="true" data-mouse-drag="false">
            <article class="box-info-modern wow slideInUp" data-wow-delay=".1s"><a class="box-info-modern-figure link-img" href="about-us.aspx"><img src="images/about-1-370x276.jpg" alt="" width="370" height="276"/></a>
              <h4 class="box-info-modern-title"><a href="about-us.aspx">活动（关于我们）</a></h4><a class="box-info-modern-link" href="about-us.aspx">more</a>
            </article>
            <article class="box-info-modern wow slideInUp"><a class="box-info-modern-figure link-img" href="about-us.aspx"><img src="images/about-2-370x276.jpg" alt="" width="370" height="276"/></a>
              <h4 class="box-info-modern-title"><a href="about-us.aspx">论坛（关于我们)</a></h4><a class="box-info-modern-link" href="about-us.aspx">more</a>
            </article>
            <article class="box-info-modern wow slideInUp" data-wow-delay=".1s"><a class="box-info-modern-figure link-img" href="about-us.aspx"><img src="images/about-3-370x276.jpg" alt="" width="370" height="276"/></a>
              <h4 class="box-info-modern-title"><a href="about-us.aspx">商城（关于我们）</a></h4><a class="box-info-modern-link" href="about-us.aspx">more</a>
            </article>
          </div>
        </div>
      </section>
      <!-- New products-->
      <section class="section section-xl section-last bg-gray-1">
        <div class="container">
          <h2 class="inset-sm-20 inset-xl-50">这些就拜托各位了</h2>
          <div class="row row-50">
            <div class="col-sm-6 col-md-4">
              <article class="box-icon-classic text-sm-left">
                <div class="unit flex-column flex-sm-row flex-md-column flex-xl-row">
                  <div class="unit-left">
                    <div class="box-icon-classic-icon"><img src="images/icon-01-50x50.png" alt="" width="50" height="50"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <h4 class="box-icon-classic-title">养宠前的准备<a href="#"></a></h4>
                    <p class="box-icon-classic-text">宠物对于宠主来说只是生活的一部分，但宠主却是宠物的全部。饲养前要做好养宠负担的调查，确认自己可以较为愉快的去长期承担这些责任，然后就可以开始准备好养宠的资金及环境</p>
                  </div>
                </div>
              </article>
            </div>
            <div class="col-sm-6 col-md-4">
              <article class="box-icon-classic text-sm-left">
                <div class="unit flex-column flex-sm-row flex-md-column flex-xl-row">
                  <div class="unit-left">
                    <div class="box-icon-classic-icon"><img src="images/icon-02-50x42.png" alt="" width="50" height="42"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <h4 class="box-icon-classic-title"><a href="#">当你无法继续照顾它时</a></h4>
                    <p class="box-icon-classic-text">世事难料，人生总是有许多不得已的情况，但是大多数宠物并没有独立生存的能力。所以希望当你无法继续照顾它时，能尽量为它安排未来，如为它寻找下一任主人、可以收留的机构等</p>
                  </div>
                </div>
              </article>
            </div>
            <div class="col-sm-6 col-md-4">
              <article class="box-icon-classic text-sm-left">
                <div class="unit flex-column flex-sm-row flex-md-column flex-xl-row">
                  <div class="unit-left">
                    <div class="box-icon-classic-icon"><img src="images/icon-03-48x50.png" alt="" width="48" height="50"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <h4 class="box-icon-classic-title"><a href="#">宠物教育</a></h4>
                    <p class="box-icon-classic-text">对于定位定点上厕所，不拆家，服从命令等等行为，大部分宠物都是需要人为的教育才可以做到，如果宠主需要的话，建议从娃娃抓起，早教早享受</p>
                  </div>
                </div>
              </article>
            </div>
            <div class="col-sm-6 col-md-4">
              <article class="box-icon-classic text-sm-left">
                <div class="unit flex-column flex-sm-row flex-md-column flex-xl-row">
                  <div class="unit-left">
                    <div class="box-icon-classic-icon"><img src="images/icon-04-42x50.png" alt="" width="42" height="50"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <h4 class="box-icon-classic-title"><a href="#">法律方面</a></h4>
                    <p class="box-icon-classic-text">为了确保其他公民的权益保障，也为了自己和宠物的权益保障，各位宠主在饲养的时候一定要合法合规。</p>
                  </div>
                </div>
              </article>
            </div>
            <div class="col-sm-6 col-md-4">
              <article class="box-icon-classic text-sm-left">
                <div class="unit flex-column flex-sm-row flex-md-column flex-xl-row">
                  <div class="unit-left">
                    <div class="box-icon-classic-icon"><img src="images/icon-05-42x50.png" alt="" width="42" height="50"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <h4 class="box-icon-classic-title"><a href="#">医疗方面</a></h4>
                    <p class="box-icon-classic-text">随着社会的发展，宠物在人们心中的地位也越来越重要，大部分宠物医生是和主人一样的希望能救治好宠物，希望各位宠主在一知半解的时候能够相信医生的判断。</p>
                  </div>
                </div>
              </article>
            </div>
            <div class="col-sm-6 col-md-4">
              <article class="box-icon-classic text-sm-left">
                <div class="unit flex-column flex-sm-row flex-md-column flex-xl-row">
                  <div class="unit-left">
                    <div class="box-icon-classic-icon"><img src="images/icon-06-50x44.png" alt="" width="50" height="44"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <h4 class="box-icon-classic-title"><a href="#">养宠快乐</a></h4>
                    <p class="box-icon-classic-text">puffles衷心的希望您和您的宠物能够从饲养中感受到快乐，能从中汲取到力量去更阳光的度过互相陪伴的每一天</p>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>
      <!-- CTA-->
      <section class="section section-xxl bg-primary context-dark bg-position-2 text-left" style="background-image: url('images/bg-cta.jpg')">
        <div class="container">
          <div class="row">
            <div class="col-md-7">
              <h2 class="wow fadeInRight">Hurry up!</h2>
              <h4 class="wow fadeInRight" data-wow-delay=".1s">Save 50% on all items your first order</h4>
              <p class="wow fadeInRight" data-wow-delay=".2s">Shop today to save big on your first order at Puffles Store and get everything that your dog needs to stay healthy and happy.</p><a class="button button-lg button-primary button-zakaria wow fadeInUp" href="shop-list.aspx">Shop now</a>
            </div>
          </div>
        </div>
      </section>
      <section class="section section-xxl bg-gray-1">
        <div class="container">
          <h2 class="wow fadeScale">Products</h2>
          <!-- Owl Carousel-->
          <div class="owl-carousel owl-style-9" data-items="1" data-sm-items="2" data-md-items="3" data-lg-items="4" data-margin="30" data-dots="true">
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-01-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Deep Dish Cuddler</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price product-price-old">$30.00</div>
                  <div class="product-price">$23.00</div>
                </div>
              </div><span class="product-badge product-badge-sale">Sale</span>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-02-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Zoo Fun Dog Collars</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price">$11.00</div>
                </div>
              </div>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-03-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Glendan Dog Brush</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price">$17.00</div>
                </div>
              </div><span class="product-badge product-badge-new">New</span>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-04-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Pet Food Bowl</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price">$12.00</div>
                </div>
              </div>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-01-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Deep Dish Cuddler</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price product-price-old">$30.00</div>
                  <div class="product-price">$23.00</div>
                </div>
              </div><span class="product-badge product-badge-sale">Sale</span>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-02-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Zoo Fun Dog Collars</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price">$11.00</div>
                </div>
              </div>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-03-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Glendan Dog Brush</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price">$17.00</div>
                </div>
              </div><span class="product-badge product-badge-new">New</span>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-04-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Pet Food Bowl</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price">$12.00</div>
                </div>
              </div>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-01-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Deep Dish Cuddler</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price product-price-old">$30.00</div>
                  <div class="product-price">$23.00</div>
                </div>
              </div><span class="product-badge product-badge-sale">Sale</span>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-02-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Zoo Fun Dog Collars</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price">$11.00</div>
                </div>
              </div>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-03-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Glendan Dog Brush</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price">$17.00</div>
                </div>
              </div><span class="product-badge product-badge-new">New</span>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
            <!-- Product-->
            <article class="product">
              <div class="product-body">
                <div class="product-figure"><img src="images/product-04-200x200.png" alt="" width="200" height="200"/>
                </div>
                <h5 class="product-title"><a href="single-product.aspx">Pet Food Bowl</a></h5>
                <div class="product-price-wrap">
                  <div class="product-price">$12.00</div>
                </div>
              </div>
              <div class="product-button-wrap">
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.aspx"></a></div>
                <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-shopping202" href="cart-page.aspx"></a></div>
              </div>
            </article>
          </div>
        </div>
      </section>
      <!-- About Us-->
      <section class="section section-xl bg-default">
        <div class="container">
          <h2 class="wow fadeScale">About us</h2>
          <div class="row row-30 row-lg justify-content-center">
            <div class="col-sm-8 col-md-7 col-lg-6 wow fadeInLeft"><img src="images/about-4-570x511.jpg" alt="" width="570" height="511"/>
            </div>
            <div class="col-md-10 col-lg-6 wow fadeInRight">
              <!-- Bootstrap tabs-->
              <div class="tabs-custom tabs-jean" id="tabs-1">
                <!-- Tab panes-->
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="tabs-1-1">
                    <div class="box-info-creative">
                      <h4 class="box-info-creative-title"><a href="#">Our Pet Shop’s mission lies in providing quality care for pets.</a></h4>
                      <div class="box-info-creative-text">We want our clients and their pets to receive the best service and goods, that’s why we work only with proven and respected manufacturers.</div><a class="link-classic box-info-creative-link" href="#">Read more</a>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="tabs-1-2">
                    <div class="box-info-creative">
                      <h4 class="box-info-creative-title"><a href="#">Aiming to be the leading place for pet care and shopping</a></h4>
                      <div class="box-info-creative-text">Our vision at Puffles is to become the #1 online store for pets as well as the space where owners can get any kind of pet-related services at an affordable price.</div><a class="link-classic box-info-creative-link" href="#">Read more</a>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="tabs-1-3">
                    <div class="box-info-creative">
                      <h4 class="box-info-creative-title"><a href="#">We always strive for being professional and consistent</a></h4>
                      <div class="box-info-creative-text">Our work is defined by certain values that include excellence, care, professionalism, innovation, and consistency. We aim to provide the best pet care services to you.</div><a class="link-classic box-info-creative-link" href="#">Read more</a>
                    </div>
                  </div>
                </div>
                <!-- Nav tabs-->
                <div class="nav-tabs-wrap">
                  <ul class="nav nav-tabs">
                    <li class="nav-item" role="presentation"><a class="nav-link active" href="#tabs-1-1" data-toggle="tab">Our mission</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="#tabs-1-2" data-toggle="tab">our vision</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="#tabs-1-3" data-toggle="tab">our values</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Out Team-->
      <section class="section section-xxl bg-gray-1">
        <div class="container">
          <h2 class="wow fadeScale">Our team</h2>
          <!-- Owl Carousel-->
          <div class="owl-carousel owl-style-10" data-items="1" data-sm-items="2" data-lg-items="3" data-margin="30" data-dots="true" data-mouse-drag="false">
            <article class="team-creative wow slideInUp" data-wow-delay=".1s">
              <div class="team-creative-header"><a class="team-creative-figure" href="#"><img src="images/team-8-249x249.jpg" alt="" width="249" height="249"/></a>
                <div class="team-creative-decor"></div>
              </div>
              <div class="team-creative-body">
                <h4 class="team-creative-name"><a href="#">Richard Smith</a></h4>
                <p class="team-creative-text">Senior salesman with 15 years of experience. He knows everything about the pet products he offers.</p>
                <ul class="list-inline team-creative-list-social list-social-2 list-inline-sm">
                  <li><a class="icon mdi mdi-facebook" href="#"></a></li>
                  <li><a class="icon mdi mdi-twitter" href="#"></a></li>
                  <li><a class="icon mdi mdi-instagram" href="#"></a></li>
                  <li><a class="icon mdi mdi-google-plus" href="#"></a></li>
                </ul>
              </div>
            </article>
            <article class="team-creative wow slideInUp">
              <div class="team-creative-header"><a class="team-creative-figure" href="#"><img src="images/team-9-249x249.jpg" alt="" width="249" height="249"/></a>
                <div class="team-creative-decor"></div>
              </div>
              <div class="team-creative-body">
                <h4 class="team-creative-name"><a href="#">Susan Anderson</a></h4>
                <p class="team-creative-text">Mega positive shop assistant who is always ready to help you make the right choice and charm you with a smile.</p>
                <ul class="list-inline team-creative-list-social list-social-2 list-inline-sm">
                  <li><a class="icon mdi mdi-facebook" href="#"></a></li>
                  <li><a class="icon mdi mdi-twitter" href="#"></a></li>
                  <li><a class="icon mdi mdi-instagram" href="#"></a></li>
                  <li><a class="icon mdi mdi-google-plus" href="#"></a></li>
                </ul>
              </div>
            </article>
            <article class="team-creative wow slideInUp" data-wow-delay=".1s">
              <div class="team-creative-header"><a class="team-creative-figure" href="#"><img src="images/team-10-249x249.jpg" alt="" width="249" height="249"/></a>
                <div class="team-creative-decor"></div>
              </div>
              <div class="team-creative-body">
                <h4 class="team-creative-name"><a href="#">Steve Ruffalo</a></h4>
                <p class="team-creative-text">Steve is the leading groomer at Puffles. He is always ready to make your pet look and feel good.</p>
                <ul class="list-inline team-creative-list-social list-social-2 list-inline-sm">
                  <li><a class="icon mdi mdi-facebook" href="#"></a></li>
                  <li><a class="icon mdi mdi-twitter" href="#"></a></li>
                  <li><a class="icon mdi mdi-instagram" href="#"></a></li>
                  <li><a class="icon mdi mdi-google-plus" href="#"></a></li>
                </ul>
              </div>
            </article>
          </div>
        </div>
      </section>
      <!-- CTA 2-->
      <section class="section section-xxl section-inset-1 bg-image" style="background-image: url(images/bg-cta-1.jpg);">
        <div class="container box-cta">
          <h2 class="wow fadeInDown">Dog & cat treats</h2>
          <h4 class="wow fadeScale">Pamper your pets with our range of quality dog & cat treats</h4><a class="button button-lg button-primary wow fadeInUp btn-one" href="shop-list.aspx">Shop now</a>
        </div>
      </section>
      <!-- Out Clients-->
      <section class="section section-xxl bg-default">
        <div class="container">
          <h2 class="wow fadeScale">What Our Clients Say</h2>
          <!-- Owl Carousel-->
          <div class="owl-carousel owl-style-11" data-items="1" data-sm-items="2" data-margin="30" data-dots="true" data-autoplay="false">
            <!-- Quote Carly-->
            <article class="quote-carly quote-carly-1">
              <div class="quote-carly-text"><img class="quote-carly-icon" src="images/quote-37x29.png" alt="" width="37" height="29"/>
                <div class="q">The daycare service provided by Puffles is a real timesaver for me. I’m always calm and happy that my dog is treated well.</div>
              </div>
              <div class="quote-carly-footer">
                <div class="unit unit-spacing-sm flex-column flex-md-row align-items-center">
                  <div class="unit-left">
                    <div class="quote-carly-figure"><img src="images/user-10-62x62.jpg" alt="" width="62" height="62"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <div class="quote-carly-author">Brian Foster</div>
                    <div class="quote-carly-status">Client</div>
                  </div>
                </div>
              </div>
            </article>
            <!-- Quote Carly-->
            <article class="quote-carly quote-carly-1">
              <div class="quote-carly-text"><img class="quote-carly-icon" src="images/quote-37x29.png" alt="" width="37" height="29"/>
                <div class="q">Puffles has the best selection of food and supplies for cats and dogs. I highly recommend this site to every pet owner.</div>
              </div>
              <div class="quote-carly-footer">
                <div class="unit unit-spacing-sm flex-column flex-md-row align-items-center">
                  <div class="unit-left">
                    <div class="quote-carly-figure"><img src="images/user-11-62x62.jpg" alt="" width="62" height="62"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <div class="quote-carly-author">Kathryn Evans</div>
                    <div class="quote-carly-status">Client</div>
                  </div>
                </div>
              </div>
            </article>
            <!-- Quote Carly-->
            <article class="quote-carly quote-carly-1">
              <div class="quote-carly-text"><img class="quote-carly-icon" src="images/quote-37x29.png" alt="" width="37" height="29"/>
                <div class="q">I like the vast choice of cat food that this pet shop provides. Being a regular client here for 3 years, I am 100% satisfied by Puffles.</div>
              </div>
              <div class="quote-carly-footer">
                <div class="unit unit-spacing-sm flex-column flex-md-row align-items-center">
                  <div class="unit-left">
                    <div class="quote-carly-figure"><img src="images/user-5-62x62.jpg" alt="" width="62" height="62"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <div class="quote-carly-author">Evan Williams</div>
                    <div class="quote-carly-status">Client</div>
                  </div>
                </div>
              </div>
            </article>
            <!-- Quote Carly-->
            <article class="quote-carly quote-carly-1">
              <div class="quote-carly-text"><img class="quote-carly-icon" src="images/quote-37x29.png" alt="" width="37" height="29"/>
                <div class="q">The supportive team of this online store helped me in choosing exactly what my dachshund needs right now. Thank you!</div>
              </div>
              <div class="quote-carly-footer">
                <div class="unit unit-spacing-sm flex-column flex-md-row align-items-center">
                  <div class="unit-left">
                    <div class="quote-carly-figure"><img src="images/user-6-62x62.jpg" alt="" width="62" height="62"/>
                    </div>
                  </div>
                  <div class="unit-body">
                    <div class="quote-carly-author">Emily jameson</div>
                    <div class="quote-carly-status">Client</div>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
      </section>
      <!-- Latest News-->
      <section class="section section-xxl bg-gray-1">
        <div class="container">
          <h2 class="wow fadeScale">Latest News</h2>
          <div class="row row-lg row-30 justify-content-center">
            <div class="col-sm-8 col-md-6 wow fadeInLeft">
              <!-- Post Nikki 2-->
              <article class="post post-nikki post-nikki-2">
                <div class="post-nikki-figure"><img src="images/post-1-570x461.jpg" alt="" width="570" height="461"/>
                </div>
                <div class="post-nikki-body">
                  <div>
                    <div class="post-nikki-time">
                      <time datetime="2021-09-08">August 9, 2021</time>
                    </div>
                    <div class="post-nikki-title"><a href="blog-post.aspx">Deciphering your cat’s language</a></div>
                  </div>
                </div>
              </article>
            </div>
            <div class="col-md-6">
              <div class="row row-30">
                <div class="col-6 col-md-12 wow fadeInRight">
                  <!-- Post Nikki-->
                  <article class="post post-nikki">
                    <div class="unit unit-spacing-lg flex-column flex-md-row align-items-center">
                      <div class="unit-left"><a class="post-nikki-figure" href="blog-post.aspx"><img src="images/post-2-270x215.jpg" alt="" width="270" height="215"/></a></div>
                      <div class="unit-body">
                        <div class="post-nikki-time">
                          <time datetime="2021-09-08">August 9, 2021</time>
                        </div>
                        <div class="post-nikki-title"><a href="blog-post.aspx">Easy tricks to teach your dog</a></div>
                      </div>
                    </div>
                  </article>
                </div>
                <div class="col-6 col-md-12 wow fadeInRight">
                  <!-- Post Nikki-->
                  <article class="post post-nikki">
                    <div class="unit unit-spacing-lg flex-column flex-md-row align-items-center">
                      <div class="unit-left"><a class="post-nikki-figure" href="blog-post.aspx"><img src="images/post-3-270x215.jpg" alt="" width="270" height="215"/></a></div>
                      <div class="unit-body">
                        <div class="post-nikki-time">
                          <time datetime="2021-09-08">August 9, 2021</time>
                        </div>
                        <div class="post-nikki-title"><a href="blog-post.aspx">8 tips for taking the perfect photo of your pet</a></div>
                      </div>
                    </div>
                  </article>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Section Clients-->
      <section class="section section-xl bg-primary">
        <div class="container">
          <div class="owl-carousel owl-style-2" data-items="2" data-sm-items="3" data-md-items="4" data-lg-items="5" data-margin="30" data-dots="true"><a class="clients-classic" href="#"><img src="images/clients-1-120x114.png" alt="" width="120" height="114"/></a><a class="clients-classic" href="#"><img src="images/clients-2-105x118.png" alt="" width="105" height="118"/></a><a class="clients-classic" href="#"><img src="images/clients-3-111x98.png" alt="" width="111" height="98"/></a><a class="clients-classic" href="#"><img src="images/clients-4-122x92.png" alt="" width="122" height="92"/></a><a class="clients-classic" href="#"><img src="images/clients-5-112x112.png" alt="" width="112" height="112"/></a></div>
        </div>
      </section>
      <!-- Page Footer-->
      <footer class="section footer-modern">
        <div class="footer-modern-body section-xl">
          <div class="container">
            <div class="row row-40 row-md-50 justify-content-xl-between">
              <div class="col-md-10 col-lg-3 col-xl-4 wow fadeInRight">
                <div class="inset-xl-right-70">
                  <h5 class="footer-modern-title">Our Gallery</h5>
                  <div class="row row-10 gutters-10" data-lightgallery="group">
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><a class="thumbnail-minimal" href="images/footer-gallery-1-800x1200-original.jpg" data-lightgallery="item"><img src="images/grid-gallery-1-178x178.jpg" alt="" width="178" height="178"/></a>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><a class="thumbnail-minimal" href="images/footer-gallery-2-800x1200-original.jpg" data-lightgallery="item"><img src="images/grid-gallery-2-178x178.jpg" alt="" width="178" height="178"/></a>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><a class="thumbnail-minimal" href="images/footer-gallery-3-800x1200-original.jpg" data-lightgallery="item"><img src="images/grid-gallery-3-178x178.jpg" alt="" width="178" height="178"/></a>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><a class="thumbnail-minimal" href="images/footer-gallery-4-1200x800-original.jpg" data-lightgallery="item"><img src="images/grid-gallery-4-178x178.jpg" alt="" width="178" height="178"/></a>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><a class="thumbnail-minimal" href="images/footer-gallery-5-1200x800-original.jpg" data-lightgallery="item"><img src="images/grid-gallery-5-178x178.jpg" alt="" width="178" height="178"/></a>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><a class="thumbnail-minimal" href="images/footer-gallery-6-1200x800-original.jpg" data-lightgallery="item"><img src="images/grid-gallery-6-178x178.jpg" alt="" width="178" height="178"/></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-md-7 col-lg-5 wow fadeInRight" data-wow-delay=".1s">
                <h5 class="footer-modern-title">Quick Links</h5>
                <ul class="footer-modern-list footer-modern-list-2 d-sm-inline-block d-md-block">
                  <li><a href="about-us.aspx">About Us</a></li>
                  <li><a href="#">Our Services</a></li>
                  <li><a href="shop-list.aspx">Shop</a></li>
                  <li><a href="testimonials.aspx">Testimonials</a></li>
                  <li><a href="#">FAQ</a></li>
                  <li><a href="contact-us.aspx">Contact Us</a></li>
                  <li><a href="#">Accessories</a></li>
                  <li><a href="#">Care</a></li>
                  <li><a href="#">Clothing</a></li>
                  <li><a href="#">Decor</a></li>
                  <li><a href="#">Food</a></li>
                  <li><a href="#">Grooming Supplies</a></li>
                </ul>
              </div>
              <div class="col-sm-6 col-md-5 col-lg-4 col-xl-3 wow fadeInRight" data-wow-delay=".2s">
                <h5 class="footer-modern-title">Get in touch</h5>
                <ul class="contacts-creative">
                  <li>
                    <div class="unit unit-spacing-sm flex-column flex-md-row">
                      <div class="unit-left"><span class="icon mdi mdi-map-marker linear-icon"></span></div>
                      <div class="unit-body"><a href="#">523 Sylvan Ave, 5th Floor<br>Mountain View, CA 94041 USA</a></div>
                    </div>
                  </li>
                  <li>
                    <div class="unit unit-spacing-sm flex-column flex-md-row">
                      <div class="unit-left"><span class="icon mdi mdi-phone linear-icon"></span></div>
                      <div class="unit-body"><a href="tel:#">(+844) 123 456 78</a></div>
                    </div>
                  </li>
                  <li>
                    <div class="unit unit-spacing-sm flex-column flex-md-row">
                      <div class="unit-left"><span class="icon mdi mdi-email-outline linear-icon"></span></div>
                      <div class="unit-body"><a href="mailto:#">info@demolink.org</a></div>
                    </div>
                  </li>
                </ul>
                <ul class="list-inline list-social-3 list-inline-sm ">
                  <li><a class="icon mdi mdi-facebook  icon-xxs" href="#"></a></li>
                  <li><a class="icon mdi mdi-twitter  icon-xxs" href="#"></a></li>
                  <li><a class="icon mdi mdi-instagram  icon-xxs" href="#"></a></li>
                  <li><a class="icon mdi mdi-google-plus  icon-xxs" href="#"></a></li>
                  <li><a class="icon mdi mdi-skype  icon-xxs" href="#"></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-modern-panel text-center">
          <div class="container">
            <p class="rights">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
          </div>
        </div>
      </footer>
    </div>
    <div class="snackbars" id="form-output-global"></div>
    <script src="js/core.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>